<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fu {
            /*margin: 100px;*/
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            margin: 400px;
        }

        .ditu {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: blue;
            position: absolute;
            background-image: url("../images/fangaihezi/musict.jpg");
            /*z-index: 1000;*/
        }

        .gaizi1 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: yellow;
            background-image: url("../images/fangaihezi/musicb.jpg");
            position: absolute;
            /*锚点*/
            transform-origin: top;
            transition: all 1s;
        }

        .gaizi2 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: yellow;
            background-image: url("../images/fangaihezi/musicb.jpg");
            position: absolute;
            /*锚点*/
            transform-origin: right;
            transition: all 2s;
        }

        .gaizi3 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: yellow;
            background-image: url("../images/fangaihezi/musicb.jpg");
            position: absolute;
            /*锚点*/
            transform-origin: bottom;
            transition: all 3s;
        }

        .gaizi4 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: yellow;
            background-image: url("../images/fangaihezi/musicb.jpg");
            position: absolute;
            /*锚点*/
            transform-origin: left;
            transition: all 4s;
        }

        .fu:hover .gaizi1 {
            transform: rotate(180deg);
        }

        .fu:hover .gaizi2 {
            transform: rotate(180deg);
        }

        .fu:hover .gaizi3 {
            transform: rotate(180deg);
        }

        .fu:hover .gaizi4 {
            transform: rotate(180deg);
        }

        /*.float {*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    background-color: black;*/
        /*    float: left;*/
        /*}*/

        /*
        定位和浮动都会让元素脱离普通文档流
            定位文档流
                有层级关系，正常情况，代码越在后面，层级越高
                层级关系由z-index属性决定，值越大层级越高
            浮动文档流
            层级关系
            定位文档流 > 浮动文档流 > 普通文档流

            如果定位的子元素需要依照父元素为参照物，则父元素也必须是定位元素，且父相子绝
         */
    </style>
</head>
<body>
    <div class="fu">
<!--        <div class="float">浮动</div>-->
        <div class="ditu">底图</div>
        <div class="gaizi1">盖子</div>
        <div class="gaizi2">盖子</div>
        <div class="gaizi3">盖子</div>
        <div class="gaizi4">盖子</div>
    </div>
</body>
</html>